<template>
  <div class="nav">
    <div class="navLeft">
      <div
        :class="item.active ? 'active' : ''"
        class="nlitem"
        v-for="(item, index) in nlbtn"
        :key="index"
        @click="nlhandle(index)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="navRight">
      <div class="timewea">
        <div class="time">{{ time }}</div>
        <div class="date">
          <p>{{ week }}</p>
          <p>{{ date }}</p>
        </div>
      </div>
      <div
        :class="item.active ? 'active' : ''"
        class="nritem"
        v-for="(item, index) in nrbtn"
        :key="index"
        @click="nrhandle1(index)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
import '../assets/font/font.css'
export default {
  name: "Nav",
  data() {
    return {
      nlbtn: [
        {
          name: "办件/电子监察",
          active: true,
        },
        {
          name: "视频监控",
          active: false,
        },
        {
          name: "人流量",
          active: false,
        },
      ],
      nrbtn: [
        {
          name: "巡检管理",
          active: false,
        },
        {
          name: "照明管理",
          active: false,
        },
        {
          name: "设备管理",
          active: false,
        },
      ],
      time: "",
      week: "",
      date: "",
      selIndex: 0,
      selType: "left",
    };
  },
  mounted() {
    this.getTime();
    setInterval(() => {
      this.getTime();
    }, 1000);

    this.week = this.getWeekDate();
  },
  methods: {
    getTime() {
      let date = new Date(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hour = date.getHours(),
        minute = date.getMinutes(),
        second = date.getSeconds();
      let year = date.getFullYear();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      this.date = year + "-" + month + "-" + day;
      this.time = hour + ":" + minute + ":" + second;
    },
    getWeekDate() {
      let now = new Date();
      let day = now.getDay();
      let weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      let week = weeks[day];
      return week;
    },
    nlhandle(index) {
      if (this.selType === "left") {
        this.nlbtn[this.selIndex].active = false;
      } else if (this.selType === "right") {
        this.nrbtn[this.selIndex].active = false;
      }
      this.selType = "left";
      this.nlbtn[index].active = true;
      this.selIndex = index;
      this.$emit('clickMenu',index,this.selType);
    },
    nrhandle1(index) {
      debugger
      if (this.selType === "left") {
        this.nlbtn[this.selIndex].active = false;
      } else if (this.selType === "right") {
        this.nrbtn[this.selIndex].active = false;
      }
      this.selType = "right";
      this.nrbtn[index].active = true;
      this.selIndex = index;
      this.$emit('clickMenu',index,this.selType);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nav {
  width: 100%;
  height: 95px;
  position: absolute;
  top: 0px;
  background-image: url("~@/assets/img/nav/logo.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 13px;
  position: absolute;
  z-index: 10;
  text-align: center;
}
.navLeft {
  width: 30%;
  height: 50px;
  float: left;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  color: #fff;
  position: relative;
  margin-top: 15px;
}
.navLeft .nlitem {
  width: 23%;
  height: 40px;
  line-height: 40px;
  background-image: url("~@/assets/img/nav/menu.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  cursor: pointer;
}
.navLeft .active {
  background-image: url("~@/assets/img/nav/menu_active.png");
}

.nlitem:nth-child(1) {
  left: 30.5%;
}
.nlitem:nth-child(2) {
  left: 50%;
}
.nlitem:nth-child(3) {
  left: 70%;
}
.navRight {
  width: 28%;
  height: 50px;
  float: right;
  display: flex;
  justify-content: space-between;
  color: #fff;
  position: relative;
  margin-top: 15px;
}
.navRight .nritem {
  width: 23%;
  height: 40px;
  line-height: 40px;
  background-image: url("~@/assets/img/nav/menur.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  cursor: pointer;
}
.navRight .active {
  background-image: url("~@/assets/img/nav/menur_active.png");
}
.nritem:nth-child(2) {
  left: 20%;
}
.nritem:nth-child(3) {
  left: 40%;
}
.timewea {
  min-width: 170px;
  position: absolute;
  right: 20px;
  font-family: SourceHanSansSC;
}
.timewea .time {
  float: left;
  font-size: 28px;
  line-height: 40px;
}
.timewea .date {
  font-size: 12px;
  float: right;
  margin-top: 2px;
}
</style>
